import React, { useState, useEffect } from "react";
import { Icon } from "antd";
import { format } from "timeago.js";

import style from "./index.module.scss";
import { ArticleApi } from "@/api/article";
import { ArticleList } from "../ArticleList";
import Link from "next/link";

interface IProps {
  articleId?: string;
  mode?: string;
  asCard?: boolean;
  needHead?: boolean;
}
export const Recommend: React.FC<IProps> = ({
  needHead = true,
  articleId,
  mode = "inline",
  asCard = true
}) => {
  const [articles, setArticles] = useState([]);
  useEffect(() => {
    ArticleApi.getRecommend(articleId).then(res => {
      setArticles(res);
    });
  }, [articleId]);
  return mode === "inline" ? (
    <div className={style.wrapper}>
      {needHead && (
        <div className={style.head}>
          <Icon type="file-text" />
          <span>推荐文章</span>
        </div>
      )}
      <ul className={style.list}>
        {articles.map(item => (
          <li key={item.id}>
            <Link href={`/article/[id]`} as={`/article/${item.id}`}>
              <a>
                <span>{item.title}</span>
                {"  ·  "}
                <span className={style.time}>
                  {format(item.publishAt, "zh_CN")}
                </span>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  ) : (
    <ArticleList asCard={asCard} articles={articles} />
  );
};
